<template>
  <div>
    <h1>商家拼团活动</h1>
    <el-form :inline="true" :model="pageFrom" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input
          v-model="pageFrom.keyWord"
          placeholder="请输入名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="pageFrom.beginTime"
          type="datetime"
          placeholder="请选择开始时间"
        />--
        <el-date-picker
          v-model="pageFrom.endTime"
          type="datetime"
          placeholder="请选择开始时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadGroupJoinList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="joinId" label="序号" />
      <el-table-column prop="activeName" label="活动名称" />
      <el-table-column prop="joinName" label="活动拼团名称" />
      <el-table-column prop="unitName" label="单位" />
      <el-table-column prop="joinImages" label="轮播图">
        <!-- <template #default="scope">
          <el-carousel height="50px">
            <el-carousel-item v-for="url in scope.row.joinImages" :key="url">
              <el-image style="width: 50px; height: 50px" :src="url" />
            </el-carousel-item>
          </el-carousel>


        
        </template> -->
        <template #default="scope">
          <el-image
            v-if="scope.row.joinImages != null"
            style="width: 100px; height: 50px"
            :src="scope.row.joinImages"
          />
        </template>
      </el-table-column>
      <el-table-column prop="beginTime" label="活动开始时间" />
      <el-table-column prop="endTime" label="活动结束时间" />
      <el-table-column prop="groupNum" label="拼团人数" />
      <el-table-column prop="buyMax" label="总购买数量限制" />
      <el-table-column prop="virtualNum" label="补齐人数" />
      <el-table-column prop="prodPrice" label="商品原价" />
      <el-table-column prop="groupPrice" label="拼团人数" />
      <el-table-column prop="prodInfoId" label="拼团商品" />
      <el-table-column prop="sendKindName" label="配送方式" />
      <el-table-column prop="joinTop" label="排序" />
      <el-table-column prop="joinDesc" label="活动详情" />
      <el-table-column prop="sendMoney" label="运费" />
      <el-table-column prop="joinTip" label="拼团活动简介" />

      <el-table-column label="删除">
        <template #default="scope">
          <el-button type="danger" @click="onDeleteGroupJoin(scope.row)"
            >删除</el-button
          >
          <el-button type="danger" @click="onUpdateActive(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="margin-top: 20px">
      <el-pagination
        v-model:current-page="pageFrom.pageNum"
        v-model:page-size="pageFrom.pageSize"
        :page-sizes="[2, 4, 6, 8]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { groupJoinList, deleteGroupJoin } from "@/api/team";

import { ElMessage } from "element-plus";
const tableData = ref([]);

const total = ref(0);
const pageFrom = ref({
  pageNum: 1,
  pageSize: 2,
  keyWord: null,
  beginTime: null,
  endTime: null,
});

const onDeleteGroupJoin = (row: any) => {
  deleteGroupJoin(row.joinId).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("您已经删除成功");
      loadGroupJoinList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
//加载
const loadGroupJoinList = () => {
  groupJoinList(pageFrom.value).then((res) => {
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
  });
};

//每页条数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageFrom.value.pageSize = val;
  loadGroupJoinList();
};
//当前页数
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageFrom.value.pageNum = val;
  loadGroupJoinList();
};
onMounted(() => {
  loadGroupJoinList();
});
</script>
